<template>
	<view>
		<view class="container">
			<!-- @click="inputShowModal('nickname')" -->
			<view class="list-cell b-b m-t" hover-class="cell-hover" :hover-stay-time="50">
				<text class="cell-tit">
					旧密码
				</text>
				<!-- <u-input placeholder="请输入新密码" border="none" inputAlign="right" type="password"
					v-model="formInfo.password"></u-input> -->
					<input type="password" v-model="formInfo.password" inputAlign="right" placeholder="请输入旧密码" maxlength="15" data-key="phone">
			</view>
			<!-- @click="genderShowModal" -->
			<view class="list-cell b-b" hover-class="cell-hover" :hover-stay-time="50">
				<text class="cell-tit">
					新密码
				</text>
				<!-- <u--input placeholder="请输入新密码" border="none" inputAlign="right" type="password"
					v-model="formInfo.newPassword"></u--input> -->
					<input type="password" v-model="formInfo.newPassword" inputAlign="right" placeholder="请输入6-15位新密码" maxlength="15" data-key="phone">
			</view>
			<view class="list-cell " hover-class="cell-hover" :hover-stay-time="50">
				<text class="cell-tit">
					确认密码
				</text>
				<!-- <u--input placeholder="请输入确认密码" border="none" inputAlign="right" type="password"
					v-model="formInfo.confirmPassword"></u--input> -->
					<input type="password" v-model="formInfo.confirmPassword" inputAlign="right" placeholder="请输入确认密码" maxlength="15" data-key="phone">
			</view>
			<view class="confirm_but">
				<u-button type="primary" text="确定" @click="submit"></u-button>
			</view>


		</view>
		<u-modal :show="tipsShow" :title="title" :showCancelButton="true" :content='content' @cancel="tipsShow = false"
			@confirm="confirmSubmit"></u-modal>
				<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {
		data() {
			return {
				inputShow: false,
				feild: undefined,
				inputContent: '',
				genderShow: false,
				gender: undefined,
				// genders: [{
				// 	name: '保密',
				// 	value: 0
				// }, {
				// 	name: '男',
				// 	value: 1
				// }, {
				// 	name: '女',
				// 	value: 2
				// }]
				formInfo: {},
				tipsShow: false,
				content: "确定要修改密码？",
				title: "提示"
			}
		},
		computed: {
			...mapState(['userInfo'])
		},
		methods: {
			submit() { //提交修改密码
				if (!this.formInfo.password) {
					this.$api.msg('旧密码不能为空')
					return
				}
				if (this.formInfo.password.length < 6 || this.formInfo.password.length > 15) {
					this.$api.msg('旧密码需在6 - 15字符之间')
					return
				}
				if (!this.formInfo.newPassword) {
					this.$api.msg('新密码不能为空')
					return
				}
				if (this.formInfo.newPassword.length < 6 || this.formInfo.newPassword.length > 15) {
					this.$api.msg('新密码需在6 - 15字符之间')
					return
				}
				if (this.formInfo.newPassword === this.formInfo.password) {
					this.$api.msg('新密码不能与旧密码一致，请重新输入！')
					return
				}
				

				if (!this.formInfo.confirmPassword) {
					this.$api.msg('确认密码不能为空')
					return
				}
				if (this.formInfo.newPassword !== this.formInfo.confirmPassword) {
					this.$api.msg('新密码与确认密码不一致！')
					return
				}
				this.tipsShow = true

			},
			confirmSubmit() {
				uni.showLoading({
					title: '加载中',
					mask: true
				})
					this.tipsShow = false
					let userData = uni.getStorageSync("userInfo")
				this.$api.request('admin', 'appPassword', {
					oldPassword: this.formInfo.password,
					newPassword: this.formInfo.newPassword,
					id: userData.id
				}).then(res => {
					this.$store.commit('logout')
					this.$api.logout()
					uni.hideLoading()
					this.$refs.uToast.show({
						type: 'success',
						message: "修改成功",
						complete() {
							uni.navigateTo({
							  url: '/pages/public/login'
							})
						}
					})
				})
			},
			cancel() {
				this.inputShow = false
				this.genderShow = false
			},
			inputShowModal(feild) {
				this.feild = feild
				this.inputShow = true
				this.inputContent = ''
			},
			genderShowModal() {
				this.genderShow = true
				this.gender = this.userInfo.gender
			},
			confirm() {
				const that = this
				if (!that.inputContent) {
					that.$api.msg('输入不能为空')
					return
				}
				const obj = {}
				obj[that.feild] = that.inputContent
				that.$api.request('user', 'syncUserInfo', obj).then(res => {
					that.userInfo[that.feild] = that.inputContent
					that.inputContent = ''
					that.$store.commit('login', that.userInfo)
				})
			},
			genderRadioChange(e) {
				this.gender = parseInt(e.detail.value)
			},
			confirmGender() {
				const that = this
				if (that.gender === undefined) {
					that.$api.msg('请选择性别')
					return
				}
				const obj = {
					gender: that.gender
				}
				that.$api.request('user', 'syncUserInfo', obj).then(res => {
					that.userInfo.gender = that.gender
				})
			}

		}
	}
</script>

<style lang="scss">
	page {
		background: $page-color-base;
	}

	page {
		background: $page-color-base;
	}

	.list-cell {
		display: flex;
		align-items: baseline;
		padding: 20upx $page-row-spacing;
		line-height: 60upx;
		position: relative;
		background: #fff;
		justify-content: center;

		&.log-out-btn {
			margin-top: 40upx;

			.cell-tit {
				color: $uni-color-primary;
				text-align: center;
				margin-right: 0;
			}
		}

		&.cell-hover {
			background: #fafafa;
		}

		&.b-b:after {
			left: 30upx;
		}

		&.m-t {
			margin-top: 16upx;
		}

		.cell-more {
			align-self: baseline;
			font-size: $font-lg;
			color: $font-color-light;
			margin-left: 10upx;
		}

		.cell-tit {
			flex: 1;
			font-size: $font-base + 2upx;
			color: $font-color-dark;
			margin-right: 10upx;
		}

		.cell-tip {
			font-size: $font-base;
			color: $font-color-light;
		}

		switch {
			transform: translateX(16upx) scale(.84);
		}
	}

	.confirm_but {
		width: 90%;
		margin: 0 auto;
		margin-top: 60rpx;
	}
</style>
